import React from 'react';
import {  Button, Layout, Menu, theme } from 'antd';
import { homeRouter } from '../../router';
import Usedaohang from '../../hooks/Usedaohang';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import Toux from '../../hooks/Toux';
const { Header, Content, Footer } = Layout;

const fn = (arr) => {
  return arr.map((item) => {
    return {
      key: item.path,
      label: item.title,
    }
  })
}
const items = fn(homeRouter)
const Index: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const nav = useNavigate()
  const { lo } = useLocation()
  return (
    <Layout>
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 1,
          width: '100%',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={[lo]}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
          onClick={({ key }) => nav(key)}
        />
        <div style={{color:'#fff'}}>
           <Toux />
        </div>
       
      
      </Header>
     
      <Content style={{ padding: '0 48px' }}>

        <div
          style={{
            padding: 24,
            minHeight: 300,
            marginTop:20,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  );
};

export default Usedaohang(Index);